<template>
	<div id="JsonCodeFormat">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<h1><i class="el-icon-lx-cascades"></i> JSON代码格式化（整理JSON格式）</h1>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-row>
			<el-col :span="12" class="Jsoncol">
				<el-card :body-style="{ padding: '0px' }">
					<el-input type="textarea" :autosize="{ minRows: 20, maxRows: 20}" v-model="textarea" placeholder="请输入内容">
					</el-input>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card :body-style="{ padding: '0px' }">
					<json-viewer :value="Jsontext" :expand-depth=5 copyable boxed sort ></json-viewer>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-button type="primary" @click="JsonCodeFormatFun">格式化</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import Vue from 'vue'
	import JsonViewer from 'vue-json-viewer'
	Vue.use(JsonViewer)
	export default {
		data: function() {
			return {
				textarea: '',
				Jsontext: ''
			}
		},
		mounted() { //调用
		},
		methods: {
			JsonCodeFormatFun() {
				this.Jsontext = this.textarea
			}
		},
		watch: {},
		computed: {}
	}
</script>

<style>
	#qrcode {
		display: inline-block;

	}

	.Jsoncol {
		border-radius: 4px;
		min-height: 400px;
		/* background-color: #B3E19D; */
		text-align: center;
	}
</style>
